<template>
  <div class="page">
    <div v-loading.fullscreen.lock="fullscreenLoading">
      <template v-if="list.length>0">
        <div class="card_test" v-for="item in list" :key="item.id">
          <div class="text-ellipsis padding-bottom-sm own-border-bottom">{{ item.name }}</div>
          <div class="flex align-center justify-between margin-tb-sm" v-for="(devices, i) in item.list" :key="devices.id">
            <div class="text-ellipsis">{{i+1}}、{{ devices.building_number + '号楼' + devices.unit_number + '单元' + devices.floor + '层_' + devices.code }}</div>
            <el-button size="mini" type="success" @click="toSubmitByDevice(devices.id)">替换</el-button>
          </div>
        </div>
        <div v-if="isEnd" class="text-gray text-center text-df">这里到底啦</div>
      </template>
      <div class="text-center margin-top" v-if="list.length==0">
        暂无数据
      </div>
    </div>
  </div>
</template>

<script>
import {getDeviceByDateRangeAndBuildingLocations, replaceWorkOrderPoint} from "@/api/app/worker";

export default {
  beforeCreate() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#FFFFFF");
  },

  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy();
    next();
  },
  activated() {
    document
      .querySelector("body")
      .setAttribute("style", "background-color:#FFFFFF");
  },
  deactivated() {
    document.querySelector("body").removeAttribute("style");
  },
  components: {

  },
  data() {
    return {
      startAt: null,
      endAt: null,
      buildLat: null,
      buildLng: null,
      mediaTypeId: null,
      deviceId: null,
      settingId: null,
      orderId: null,
      isEnd: false,
      list: [],
      fullscreenLoading: false
    }
  },
  created() {
    let that = this;
    const query = that.$route.query;
    if (query.startAt) {
      this.startAt = query.startAt;
    }
    if (query.endAt) {
      this.endAt = query.endAt;
    }
    if (query.lat) {
      this.buildLat = query.lat;
    }
    if (query.lng) {
      this.buildLng = query.lng;
    }
    if (query.mediaTypeId) {
      this.mediaTypeId = query.mediaTypeId;
    }
    if (query.deviceId) {
      this.deviceId = query.deviceId;
    }
    if (query.settingId) {
      this.settingId = query.settingId;
    }
    if (query.orderId) {
      this.orderId = query.orderId;
    }
    if (query.buildId) {
      this.buildId = query.buildId;
    } 
    this.getList()
  },
  methods: {
    getList() {
      const that = this;
      var mediaTypeId = that.mediaTypeId
      if (!that.isEnd) {
        that.fullscreenLoading = true;
        const params = Object.assign({
          start_at: this.startAt,
          end_at: this.endAt,
          lat: this.buildLat,
          lng: this.buildLng,
          media_type_id: this.mediaTypeId,
          building_area_id: this.buildId
        })
        return getDeviceByDateRangeAndBuildingLocations(params)
          .then(({
                   data
                 }) => {
            var list = []
            for(var i in data){
              var o = data[i], point = o.pointTypeCountVOMap
              if(Object.keys(point).length) {
                var devices = point[mediaTypeId].mediaPointList
                if(devices.length) {
                  list.push({
                    id: o.id,
                    name: o.name,
                    list: devices
                  })
                }
              }
            }
            that.fullscreenLoading = false;
            that.list = list
            that.isEnd = true
          })
      }
    },
    toSubmitByDevice(id){
      const that = this
      this.$confirm('您确定要调整?<p class="text-red">（需要跳回首页，重新拉取数据包）</p>', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }).then(() => {
        this.fullscreenLoading = true
        replaceWorkOrderPoint({
          work_order_id: that.orderId,
          old_device_id: that.deviceId,
          new_device_id: id
        }).then(()=>{
          this.$message({
            message: '提交成功',
            type: 'success'
          });
          setTimeout(function() {
            that.fullscreenLoading = false
            window.Android.jump(that.deviceId, 1)
          }, 300);
        }).catch((res)=>{
          this.fullscreenLoading = false
        })
      }).catch(() => {

      });
    }
  }
};
</script>

<style scoped type="text/css">
.card_test {
  box-shadow: 1px 1px 10px 1px #bbb;
  margin: 20px 15px;
  padding: 20px;
  min-width: 20px;
  min-height: 30px;
  border-radius: 10px;
}
.own-border-bottom {
  border-bottom: 1px dashed #dedede
}
</style>
<style scoped lang="scss">
.page {
  font-size: 14px;
}

.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
